<template>
  <div class="recomment_list">
    <van-sticky :offset-top="54">
      <div class="home_title">
        <i class="iconfont icon-biaotizuo"></i>
        <div class="txt">热销推荐</div>
        <i class="iconfont icon-biaotiyou"></i>
      </div>
    </van-sticky>
    <div class="recomment-content">
      <van-list class="recomment-box" v-model="loading" :finished="finished" @load="loadMore">
        <div class="pro-item" v-for="(item,index) in dataList" :key="index">
          <div class="item-left">
            <van-image
              width="3.2rem"
              height="3.2rem"
              fit="cover"
              lazy-load
              :src="item.imgUrl"
            />
          </div>
          <div class="item-right">
            <div class="pro-title van-ellipsis">{{ item.name }}</div>
            <div class="money van-ellipsis">原价：<span>¥{{ item.money }}</span></div>
            <div class="money vip-money van-ellipsis">会员价：<span>¥{{ item.vipMoney }}</span></div>
            <div class="pro-tag" v-for="(t,i) in item.tags" :key="i"><span>{{t}}</span></div>
          </div>
        </div>
        <div v-if="loading" class="f-tac loading more">
          <img src="@assets/img/icon-loading.png" />
          加载中...
        </div>
        <div v-else class="f-tac loading more">你太厉害了，坚持到底了~</div>
      </van-list>
    </div>
  </div>
</template>

<script> 
import { Tabs, List } from "vant";
export default {
  name: "recommentList",
  data(){
    return{
      loading: false, //消息列表加载状态
      finished: true, //消息列表是否完成状态
      pageIndex: 0,
      pageSize: 20,
      dataList:[
        {
          name:'面部护理',
          imgUrl:'https://img0.baidu.com/it/u=1335379102,426388865&fm=26&fmt=auto&gp=0.jpg',
          money:199,
          vipMoney:179,
          tags:['补水','收缩毛孔','改善肤色'],
          desc:'主要是做面部工程，改善或预防面部出现的问题，比如美白护理治疗，针对我们皮肤的暗黄颜色不均匀，可以帮助改善、提高皮肤的亮色'
        },
        {
          name:'胸部护理',
          imgUrl:'https://img1.baidu.com/it/u=1130396178,1953878719&fm=26&fmt=auto&gp=0.jpg',
          money:299,
          vipMoney:269,
          tags:['胸部紧致','胸部健康'],
          desc:'具有活血化瘀、软坚散结的作用。10分钟消除乳腺增生、小叶增生、乳房肿痛、乳腺炎，促进胸部血液循环、淋巴循环，同时提升胸部、丰挺胸部，集美胸、健胸于一体。'
        },
        {
          name:'肩颈护理',
          imgUrl:'https://img2.baidu.com/it/u=4134282747,2650778298&fm=15&fmt=auto&gp=0.jpg',
          money:399,
          vipMoney:359,
          tags:['改善肩颈','肩颈健康','提拉紧致'],
          desc:'利用“针、药、灸”三效合一的方法，瞬间疏通堵塞的经络。使颈椎病、肩周炎经过蜂毒疗法的十分钟治疗，让您头不晕、颈不僵、上肢肩膀不麻，不痛，颈部活动自如。达到通经活络、活血化瘀、平衡阴阳的作用。'
        },
        {
          name:'腰部按摩',
          imgUrl:'https://img1.baidu.com/it/u=1862764708,2544385456&fm=26&fmt=auto&gp=0.jpg',
          money:499,
          vipMoney:449,
          tags:['改善身体酸痛','腰部健康'],
          desc:'腰部是存有许多的肌肉群及其血管的，我们在平常适度的推拿腰部是能够推动血液循环系统的，还能够排出来内毒素及其维护气血等，还能够输通气血及其提高睡眠的品质，因此在睡觉的时候开展腰部的推拿是非常好的。针对推拿腰部的益处有什么，大伙儿能够掌握文章内容的內容，随后坚持不懈去做臀部按摩'
        },
        {
          name:'腿部护理',
          imgUrl:'https://img1.baidu.com/it/u=1676802850,2079750369&fm=26&fmt=auto&gp=0.jpg',
          money:888,
          vipMoney:799,
          tags:['放松','腿部塑形','改善循环代谢'],
          desc:'部保养的好处主要有以下几种，第一种，可以使毛细血管扩张，有助于将身体中的寒邪宣泄出来。第二种，有效的消除疲劳，还可以增强体力，有助于恢复肌体的工作能力。第三种，对于胃肠不好的患者具有一定程度的调整作用，还可以缓解胃炎的发生。第四种，可以使全身的血脉畅通，还可以平衡阴阳，有效的提高身体的抗病能力，有利于提高人体的免疫力。'
        }
      ]
    }
  },
  created(){
  },
  components:{
    Tabs,
    List
  },
  computed: {
  }, 
  methods: {
    changeHandle(e){

    },
    async getList(){

    },
    loadMore() {
      if (this.finished || this.isTab) return;
      this.pageIndex += 1;
      // this.getList();
      this.getList();
    },
  }, 
};
</script>

<style scoped lang="scss">
.recomment_list {
  background: #fff;
  margin-top: .3rem;
  padding-bottom: 50px;
  .recomment-content{
    padding-top: 0.3rem;
    .recomment-box{
      padding:0 .3rem .3rem;
      .pro-item{
        margin-bottom: 10px;
        width: 100%;
        height: 3.2rem;
        background-color: #fff;
        display: flex;
        .item-left{
          height: 100%;
          width: 3.2rem;
          margin-right: 0.2rem;
          flex: none;
          border-radius: 0.05rem;
          overflow: hidden;
        }
        .item-right{
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          padding-top: 0.05rem;
         .pro-title{
            font-size: 0.3rem;
            font-weight: bold;
            margin-bottom: 0.2rem;
            flex: none;
          }
          .money{
            flex: none;
            margin-bottom: 0.1rem;
            font-size: 0.26rem;
            color: #666;
            &.vip-money{
              font-weight: bold;
              color: #333;
              span{
                color: #2d8cf0;
              }
              margin-bottom: 0.2rem;
            }
          }
          .pro-tag{
            display: flex;
            span{
              display: flex;
              align-items: center;
              justify-content: center;
              height: 0.46rem;
              padding:0 0.15rem;
              font-size: 0.24rem;
              border-radius: 0.05rem;
              margin-bottom: 0.1rem;
              color: #2d8cf0;
              background: rgba($color: #2d8cf0, $alpha: 0.2);
            }
          }
        }
      }
    }
  }
}
.my-swiper {
  height: 100%;
  margin: 0.2rem 0.2rem 0;
  border-radius: 5px;
  img {
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
